import React, { useState, useEffect } from 'react';
import { Table, Input, Button, Space, message } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';

const { Search } = Input;

function FundList() {
  const [funds, setFunds] = useState([]);
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();

  const fetchFund = async (code) => {
    try {
      setLoading(true);
      const response = await axios.get(`http://localhost:5000/api/fund/${code}`);
      setFunds([response.data]);
    } catch (error) {
      message.error('基金不存在或获取失败');
    } finally {
      setLoading(false);
    }
  };

  const columns = [
    {
      title: '基金代码',
      dataIndex: 'code',
      key: 'code',
    },
    {
      title: '基金名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button type="primary" onClick={() => navigate(`/fund/${record.code}`)}>
            查看详情
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <div>
      <div style={{ marginBottom: 16 }}>
        <Search
          placeholder="输入基金代码"
          allowClear
          enterButton={<SearchOutlined />}
          size="large"
          onSearch={fetchFund}
          style={{ maxWidth: 400 }}
        />
      </div>
      <Table
        columns={columns}
        dataSource={funds}
        rowKey="code"
        loading={loading}
      />
    </div>
  );
}

export default FundList; 